<template>
    <div class="hotGroup">
      <div class="hotGroup-main" :class="background?'hotGroup-all':''" v-for="(item,index) in hotGroup" :key="index" ﻿@tap="toGroupDetails(item.id)">
        <img :src="picPre + item.cover" alt="">
        <div>
          <div>
            <div class="hotGroup-header">
              <div class="hotGroup-header-title">
                <p>{{item.name}}</p>
                <p><i class="iconfont iconren" style="font-size: 22rpx; color: #ffffff;"></i><span>{{item.member_num}}</span></p>
              </div>
              <p v-if="item.is_add === 'yes'" style="background-color: #77E6BC;">已加入</p>
              <p v-else ﻿@tap.stop="joinBtn(item.id, index)">加入</p>
            </div>
            <p>
              {{item.describe}}
            </p>
          </div>
          <div class="hotGroup-hot" v-if="item.posts.length>0">
            <div class="hotGroup-hot-title">
              <p>【热门】</p>
              <p>{{item.posts[0].title}}</p>
            </div>
            <div class="hotGroup-hot-content" v-if="item.posts[0].talk_num > 0">
              <div>
                <img :lazy-load="true" :src="imgItem.head_img ? picPre + imgItem.head_img : picPre + 'front/avatar.jpg'" v-for="(imgItem,key) in item.posts[0].comment_img" :key="key" alt="" :style="{position: 'relative', zIndex: 1000-key*10, marginRight:-18+'rpx'}">
              </div>
              <p>{{item.posts[0].talk_num}}人正在参与讨论</p>
            </div>
          </div>
          <div class="hotGroup-hot hotGroup-choicenessAll" v-if="item.posts.length>1">
            <div class="hotGroup-hot-title">
              <p class="hotGroup-choiceness">【精选】</p>
              <p>{{item.posts[1].title}}</p>
            </div>
            <div class="hotGroup-hot-content" v-if="item.posts[1].talk_num > 0">
              <div>
                <img :lazy-load="true" :src="imgItem.head_img ? picPre + imgItem.head_img : picPre + 'front/avatar.jpg'" v-for="(imgItem,key) in item.posts[1].comment_img" :key="key" alt="" :style="{position: 'relative', zIndex: 1000-key*10, marginRight:-18+'rpx'}">
              </div>
              <p>{{item.posts[1].talk_num}}人正在参与讨论</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
    export default {
        name: "hotGroup",
      props:{
        hotGroup:{
          type:Array
        },
        background:{
          type: Boolean,
          default:false
        }
      },
      data(){
        let that = this;
          return{
            picPre: that.$api.picPre,
            hotCommentImg: [],
            siftCommentImg: [],
          }
      },
      methods:{
        toGroupDetails(id){
			uni.navigateTo({
				url: '/social/groupDetails?id='+id
			})
        },
        joinBtn(id, index){
          if(!this.isLogin){
            let that = this;
            ﻿uni.showModal({
              title: '亲，您尚未登录',
              content: '前去登录吧~',
              success (res) {
                if (res.confirm) {
                  ﻿uni.navigateTo({ 				  	url:'/person/login' 				  })
                }
              }
            });
          }
          else {
            this.$ajax
              .post(this.$api.addGroup,{id:id})
              .then(() => {
                this.$emit('changeStatus', index);
                ﻿uni.showToast({
                  title: "加入成功！",
                  icon: 'success',
                  duration: 2000
                });
              })
              .catch(err => {
                ﻿uni.showToast({
                  title: err,
                  icon: 'none',
                  duration: 2000
                })
              });
          }
        }
      },
      watch:{
        hotGroup: {
          handler(val) {
            for(let item of val){
              if(item.posts.length > 0){
                if(item.posts[0].comment_img.length>3){
                  item.posts[0].comment_img = item.posts[0].comment_img.slice(0,3);
                }
              }
              if(item.posts.length > 1){
                if(item.posts[1].comment_img.length>3){
                  item.posts[1].comment_img = item.posts[1].comment_img.slice(0,3);
                }
              }
            }
          },
          deep: true,
          immediate: true
        }
      },
      computed: {
        ...mapState([
          'isLogin'
        ])
      },
    }
</script>

<style scoped>
.hotGroup-main{
  width: 100%;
  border: 1rpx solid #EEEEEE;
  background: #F8F8F8;
  border-radius: 10rpx;
  display: flex;
  padding-top: 31rpx;
  padding-left: 2rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}
.hotGroup-all{
  border: none;
  background-color: #ffffff;
  border-bottom: 14rpx solid #F7F7F7;
}
.hotGroup-main>img{
  width: 108rpx;
  height: 108rpx;
  display: block;
  border-radius: 50%;
}
.hotGroup-main>div{
  flex: 1;
  padding-left: 37rpx;
  box-sizing: border-box;
  width: 80%;
}
.hotGroup-header{
  display: flex;
  justify-content: space-between;
}
.hotGroup-header>p{
  background-color: #F0A75F;
  width: 110rpx;
  height: 49rpx;
  border-radius: 24rpx;
  line-height: 49rpx;
  text-align: center;
  font-size: 26rpx;
  color: #FFFFFF;
}

  .hotGroup-header+p{
    font-size: 26rpx;
    color: #888888;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 12rpx 0 19rpx;
  }
  .hotGroup-header-title>p:first-child{
    font-size: 32rpx;
    color: #323232;
    font-weight: 500;
    width: 400rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
.hotGroup-header-title>p:last-child{
  width: 50rpx;
  height: 26rpx;
  background-color: #5FC3F0;
  border-radius: 10rpx;
  margin-top: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rpx;
}
.hotGroup-header-title>p:last-child>span{
  color: #ffffff;
  font-size: 18rpx;
  margin-left: 4rpx;
}
  .hotGroup-hot{
    padding: 30rpx 0;
    width: 100%;
    border-bottom: 1rpx solid #EEEEEE;
    box-sizing: border-box;
  }
  .hotGroup-choicenessAll{
    border: none;
  }
  .hotGroup-hot-title{
    display: flex;
  }
.hotGroup-hot-title>p:first-child{
  font-size: 28rpx;
  color: #EF5A56;
}
.hotGroup-hot-title>p:last-child{
  font-size: 28rpx;
  color: #323232;
  padding-left: 9rpx;
  box-sizing: border-box;
  width: 78%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.hotGroup-hot-content{
  display: flex;
  align-items: center;
  margin-top: 19rpx;
  margin-left: 16rpx;
}
.hotGroup-hot-content>p{
  font-size: 20rpx;
  color: #B4B4B4;
  margin-left: 30rpx;
}
  .hotGroup-hot-content>div>img{
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
  }
.hotGroup-hot-content>div{
  position: relative;
}
  .hotGroup-choiceness{
    color: #F48E4A !important;
  }
</style>
